<template>
  <div class="botblock">
      <ul>
        <li>
          <label for="">患者姓名</label>
          <el-input v-model="input3" style="width:100%;height:40px"></el-input>
        </li>
        <li>
          <label for="">患者卡号</label>
          <el-input v-model="input4" style="width:100%;height:40px"></el-input>
        </li>
        <li>
          <label for="">患者年龄</label>
          <el-input v-model="input5" style="width:100%;height:40px"></el-input>
        </li>
        <li>
          <label for="">出生日期</label>
          <el-date-picker
            v-model="value1"
            type="date"
            style="width:100%;height:40px;">
          </el-date-picker>
        </li>
        <li>
          <label for="">性别</label>
          <el-select v-model="value6" placeholder="">
            <el-option
              v-for="item in options6"
              :key="item.value"
              :label="item.label"
              :value="item.value" style="width:100%;height:40px">
            </el-option>
          </el-select>
        </li>
        <li>
          <label for="">手机号码</label>
          <el-input v-model="input6" style="width:100%;height:40px"></el-input>
        </li>
        <li>
          <label for="">证件号码</label>
            <el-input v-model="input7" style="width:100%;height:40px"></el-input>
        </li>
        <li>
          <label for="">接诊类型</label>
          <el-input v-model="input8" style="width:100%;height:40px"></el-input>
        </li>
        <li>
          <label for="">地址</label>
            <el-cascader
                placeholder=""
                v-model="address"
                :options="optionsdz"
                style="width:100%;"></el-cascader>
        </li>
        <li style="width:50%">
          <label for="" style="color:Transparent">看不见</label>
          <el-input v-model="input9" style="width:560px;height:40px"></el-input>
        </li>
        <li></li>
        <li style="width:850px">
          <label for="">备注</label>
          <el-input v-model="input9" style="width:850px;height:40px"></el-input>
        </li>
      </ul>
    </div>
</template>

<script>
import area from '../../../assets/area.json'
export default {
    data() {
        return {
            optionsdz: area,
            address:'',
            input3:'',
            input4:'',
            input5:'',
            input6:'',
            input7:'',
            input8:'',
            input9:'',
            options6: [{//性别
            value: 'men',
            label: '男'
            }, {
            value: 'women',
            label: '女'
            },],
            value6: '',
            value1: '',
            value2: '',
        }
    },
    methods:{
      getAddressData(address,area){
        return address.map(item=>{
          for(var val of area){
            if(val.value == item){
              area = val.children
              return val.label
            }
          }
        })
      },
    }
}
</script>

<style lang='less' scoped>
    .botblock{
      // width: 1140px;
      height: 130px;
      border-radius: 5px;
      position: absolute;
      top: 350px;
      left: 30px;
      box-sizing: border-box;
      ul{
        height: 100%;
        display:flex;
        justify-content: space-between;
        align-content:space-between;
        flex-wrap: wrap;
        margin-right: 30px;
        li{
          width: 22%;
          height: 60px;
          margin-bottom: 20px;
          label{
            font-family: "微软雅黑";
            font-size: 12px;
            color: #5c5c65;
            margin-bottom: 8px;
            display: block;
          }
          /deep/.el-select,.el-date-picker{
            width: 100%;
            height: 40px;
          }
        }
      }
    }
</style>